<template>
  <el-card shadow="never" class="border-0">
    <!-- 新增 | 刷新 -->
    <div class="flex items-center justify-between">
      <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="刷新"
        placement="top"
      >
        <el-button text @click="getData">
          <el-icon :size="20"><Refresh /></el-icon>
        </el-button>
      </el-tooltip>
    </div>

    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="title" label="标题" width="200" />
      <el-table-column prop="content" label="内容"  align="center"/>
      <el-table-column prop="create_time" label="创建时间" width="280" align="center"/>
      <!-- <el-table-column prop="update_time" label="更新时间" width="180" /> -->
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" text @click="handleUpdata(scope.row)">修改</el-button>
          <el-popconfirm 
            title="是否确认删除?"
            confirm-button-text="确认" 
            cancel-button-text="取消"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button type="primary" size="small" text >删除</el-button>
            </template>
          </el-popconfirm>         
        </template>
      </el-table-column>
      
    </el-table>
    <div class="flex items-center justify-center mt-4">
      <el-pagination
        background
        layout="prev, pager, next" 
        :total="total"
        :current-page="currentPage"
        :page-sizes="limit"
        @current-change="getData"
      />
    </div>
  </el-card>
  <FormDrawer 
    ref="formDrawerRef"
    :title="drawerTitle"
    @submit="handlsubmit"
  >
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
      <el-form-item label="公告标题" prop="title">
        <el-input v-model="form.title" placeholder="公告标题"></el-input>
      </el-form-item>
      <el-form-item label="公告内容" prop="content">
        <el-input v-model="form.content" placeholder="公告内容" type="textarea" :rows="5"></el-input>
      </el-form-item>
    </el-form>
    
  </FormDrawer>
  
</template>

<script lang='ts' setup>
import { getNoticeList, createNotice, updataNotice, deleteNotice } from '@/services/notice'
import FormDrawer from '@/components/FormDrawer.vue'
import { msgSuccess, msgWarning,  } from '@/composables/util'

// 数据
const tableData = ref([])
// 加载
const loading = ref<boolean>(false)
// 分页
const currentPage = ref<number>(1)
const total = ref<number>(0)
const limit = ref<number>(10)
// 弹窗
const drawerTitle = computed(()=>true ? '编辑' : '新增')
const formDrawerRef = ref<any>(null)
// 弹窗的表单
const formRef = ref<any>(null)
const form = reactive<any>({
  title:'',
  content: ''
})
const rules = {
  title: [{
    required: true,
    message: '内容不能为空',
    trigger: 'blur'
  }],
  content: [{
    required: true,
    message: '内容不能为空',
    trigger: 'blur'
  }]
}
// 编辑
const editId = ref<any>('')


// 方法
const getData = (p=null) =>{
  if(typeof p == 'number'){
    currentPage.value = p
  }
  loading.value = true
  getNoticeList(currentPage.value)
  .then((res:any)=>{
    // console.log(res.data.data)
    tableData.value = res.data.data.list
    total.value = res.data.data.totalCount
  })
  .finally(()=>{
    loading.value = false
  })
}
getData()


// 新增
const handleAdd = () =>{
  editId.value = ''
  form.title = ""
  form.content = ""
  formDrawerRef.value.open()
}

// 提交
const handlsubmit = () =>{
  formRef.value.validate((valid:any)=>{
    // console.log(valid)
    if(!valid) return
    // 新增数据 编辑数据
    // console.log('新增数据')
    formDrawerRef.value.showLoading()
    if(editId.value != ''){
      updataNotice(editId.value, form)
      .then((res:any)=>[
        // console.log(res),
        msgSuccess('新建成功'),
        formDrawerRef.value.close(),
        getData()
      ])
      .finally(()=>{
        formDrawerRef.value.hideLoading()
      })
    }else{
      createNotice(form)
      .then((res:any)=>[
        // console.log(res),
        msgSuccess('编辑成功'),
        formDrawerRef.value.close(),
        getData()
      ])
      .finally(()=>{
        formDrawerRef.value.hideLoading()
      })
    }
    
  })
}

// 编辑
const handleUpdata = (val:any) =>{
  console.log(val)
  editId.value = val.id
  console.log(editId.value)
  form.title = val.title
  form.content = val.content
  formDrawerRef.value.open()
}

// 删除
const handleDelete = (val:any) => {
  console.log(val)
  deleteNotice(val)
  .then((res:any)=>{
    console.log(res)
    getData()
  })
}


</script>

<style scoped>

</style>
